<template>
  <el-form label-width="120px">
    <el-form-item label="原始数据">
      <el-timeline class="RawData">
        <el-timeline-item
            v-for="(activity, index) in RawData"
            :key="index"
        >
          <el-card style="width: 90%">
            <span class="RawData_title">{{ activity.resTitle }}</span>
            <p>{{ activity.describtion }}</p>
<!--            v-model="value1"-->
            <el-select
                v-model="options_select[index]"
                multiple
                placeholder="请选择数据项（可多选）"
                style="width: 240px"
            >
            <el-option
                v-for="item in options[index]"
                :key="item"
                :label="item.label"
                :value="item"
            />
            </el-select>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-button class="RawData-btn" size="large" @click="load_cate">数据资源目录</el-button>
    </el-form-item>
    <el-form-item label="数据处理" class="data_processing">
      <el-col :span="8" v-for="(item , index) in data_processing_check" :key="item.num">
        <span class="data_processing_font">{{ item.name }}</span>
        <el-switch
            v-model="item.check"
            style="margin-left: 4px"
            inline-prompt
            :active-icon="Check"
            :inactive-icon="Close"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="数据应用">
      <el-col :span="8" v-for="(item , index) in data_application_check" :key="index">
        <span class="data_processing_font">{{ item.name }}</span>
        <el-switch
            v-model="item.check"
            style="margin-left: 4px"
            inline-prompt
            :active-icon="Check"
            :inactive-icon="Close"
        />
      </el-col>
    </el-form-item>
    <el-form-item style="float: right;margin-right: 20%">
      <el-button size="default" @click="staging" style="margin-right: 50px">暂存</el-button>
      <el-button size="default" @click="submit" style="margin-right: 50px">提交</el-button>
      <el-button size="default" @click="cancellation">取消</el-button>
    </el-form-item>
  </el-form>

  <el-dialog v-model="dialogCateVisible" title="请选择原始数据">
    <el-input v-model="data_search" style="width : 100%" placeholder="请输入你要查找的数据">
      <template #append>
        <el-button @click="data_search_btn" :icon="Search"/>
      </template>
    </el-input>
    <div class="listCateData">
      <el-checkbox-group v-model="data_searchForm" :max="3">
        <ul v-infinite-scroll="load">
          <li v-for="(item , index) in cateData" :key="index">
            <el-checkbox :label="item">{{ item.resTitle }}</el-checkbox>
          </li>
        </ul>
      </el-checkbox-group>
    </div>
    <div>
      <el-button @click="data_search_ok" style="margin-left: 75%">确定</el-button>
      <el-button @click="data_search_no">取消</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {Check, Close, Search} from '@element-plus/icons-vue'
import axios from "axios";
import data_product_requirements_definition from "@/stores/data_product_requirements_definition";
import {ElMessage} from "element-plus";


const store = data_product_requirements_definition()
let data_processing_check = store.getDataProcessingCheck
let data_application_check = store.getDataApplicationCheck

const RawData = ref([])
RawData.value = store.getRawData
const dialogCateVisible = ref(false)
const data_search = ref('')
const data_cate = ref()
const cateData = ref([])
const flag = ref(false)
const pageNum = ref(1)
const load = () => {
  flag.value = true
  load_cate()
}
const data_searchForm = ref([])
const staging = () => {
  store.setRawData(RawData.value)
  store.setDataProcessingCheck(data_processing_check)
  store.setDataApplicationCheck(data_application_check)
  store.setSelected(options_select.value)
}
const submit = () => {

  let doing = ''
  data_processing_check.forEach((item, index) => {
    if (item.check) {
      doing += item.number + ','
    }
  })
  data_application_check.forEach((item, index) => {
    if (item.check) {
      doing += item.number + ','
    }
  })
  doing = doing.substring(0, doing.length - 1)
  console.log(doing)
  const raw_data_id: any = []
  RawData.value.forEach((item, index) => {
    raw_data_id.push(item.mdId)
  })

  const data = new Map
  options_select.value.forEach((item, index) => {
    const parsedArray: any = JSON.parse(JSON.stringify(options_select.value[index]).replace(/\\\"/g, '"'));
    data.set(raw_data_id[index],parsedArray)
  })
  const details = JSON.stringify(Array.from(data))
  axios.post('http://localhost:8081/infoResMdInfo/data_demand_application', {
    rawData: raw_data_id,
    doing: doing,
    details:details
  }).then((res) => {
    console.log(res)
    if (res) {
      ElMessage.success("已提交申请")
      cancellation()
    }
  }).catch((err) => {
    ElMessage.error("提交失败")
  })
}
const cancellation = () => {
  data_processing_check.forEach(item => {
    item.check = false
  })
  data_application_check.forEach(item => {
    item.check = false
  })
  RawData.value = []
  store.setRawData([])
  store.setSelected([])
}
const load_cate = () => {
  options.value = []
  dialogCateVisible.value = true
  axios.get('http://localhost:8081/infoResMdInfo/page', {
    params: {
      pageNum: pageNum.value,
      pageSize: 10,
      resTitle: data_search.value
    }
  })
      .then(
          res => {
            if (res.data.data.records) {
              if (!flag.value) cateData.value = []
              res.data.data.records.forEach((item: {}) => {
                cateData.value.push(item)
              })
              data_cate.value = res.data.data.records
            }
          }
      ).catch(e => {
    console.log(e)
  })
  pageNum.value++
}
const data_search_btn = () => {
  pageNum.value = 1
  load_cate()
}
const data_search_ok = () => {
  // const s = JSON.parse(JSON.stringify(data_searchForm.value))
  // console.log(s)
  RawData.value = data_searchForm.value
  dialogCateVisible.value = false
  load_options()
}
const data_search_no = () => {
  data_searchForm.value = []
  dialogCateVisible.value = false
}
let options = [
  [
    {
      value: 'name',
      label: '姓名'
    },
    {
      value: 'age',
      label: '年龄'
    },
    {
      value: 'sex',
      label: '性别'
    }
  ],
  [
    {
      value: 'aaa',
      label: '班级'
    },
    {
      value: 'age1',
      label: '年龄1'
    },
    {
      value: 'sex1',
      label: '性别1'
    }
  ],
]
// function convertObjectArrayToKeyArray(objectArray: any) {
//
//   // 创建一个新的数组来存储转换后的结果
//   const result:any = [];
//
//   // 遍历对象数组
//   objectArray.forEach(obj => {
//     // 获取对象的所有键
//     const keys = Object.keys(obj);
//     // 将每个键作为数组的元素添加到结果数组中
//     result.push(keys);
//   });
//
//   return result;
// }
const options_select = ref([])
const load_options = () => {
  RawData.value.forEach(item =>{
    axios.get(item.onLineSrc).then(res =>{
      if (res.status === 200){
        options = []
        options.push(...res.data)
      }
    }).catch(e =>{
      console.log(e)
    })
  })
  console.log(options)
}
</script>

<style scoped lang="scss">
.first-label {
  margin-top: 20px;
}

:deep(.el-form-item__label) {
  font-size: 20px;
  margin-top: 10px;
}

:deep(.el-form-item__content) {
  margin-left: 50px;
}

.RawData {
  margin-top: 10px;
  width: 80%;

  .RawData_title {
    font-size: 20px;
    color: #4a8ef9;
  }
}

.RawData-btn {
  float: right;
}

.data_processing {

}

.data_processing_font {
  position: relative;
  top: 1px;
}

:deep(.el-card__body) {
  padding: 5px 0 0 10px;
}

.listCateData {
  margin-top: 20px;
  margin-left: 20px;
  height: 200px;
  overflow: auto;

  li {
    margin-top: 5px;
  }
}
</style>